<template>
    <div class="icbcOrder">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>工行订单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 10px;">搜索
                </el-button>
            </div>
            <el-table :data="data" border max-height="700px" class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="id" width="120" label="id" sortable>
                </el-table-column>
                <el-table-column prop="outTradeNo" label="订单号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="status" label="状态" :formatter="formatter">
                    <template slot-scope="scope">
                            <span style="color: #00d1b2" v-if="scope.row.status == '0'">待确认</span>
                            <span style="color: #E6A23C" v-if="scope.row.status == '1'">待发货</span>
                            <span style="color: #409EFF" v-if="scope.row.status == '2'">已发货</span>
                            <span style="color: #F56C6C" v-if="scope.row.status == '3'">已完成</span>
                            <span style="color: #6d37f1" v-if="scope.row.status == '4'">已取消</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column label="操作" width="220" align="center" fixed="right">
                        <template slot-scope="scope" v-if="scope.row.status == 1">
                            <el-button type="text" class="org" @click="sendGood(scope.$index, scope.row)">
                                发货
                            </el-button>
                        </template>
                    </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { EXPREESS } from '@/api/api.js'
    export default {
        name: 'icbcOrder',
        data() {
            return {
                tableData: [],
                del_list: [],
                select_cate: '',
                select_word: '',
            }
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.status === this.del_list[i].status) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if (d.name.indexOf(this.select_cate) > -1 && (d.name.indexOf(this.select_word) > -1 ||
                            d.name.indexOf(this.select_word) > -1)) {
                            return d;
                        }
                    }
                })
            }
        },
        mounted() {
            this.getOrder()
        },
        methods: {
            async getOrder() {
                let that = this
                await that.$GET(`${EXPREESS}`)
                    .then(res => {
                        if(res.code == 200) {
                            let data = []
                            res.data.forEach((value, index, array) => {
                                data.push({
                                    id: value.id,
                                    name: value.name,
                                    outTradeNo: value.outTradeNo,
                                    phone: value.phone,
                                    address: value.address,
                                    remark: value.remark,
                                    status: value.status
                                })
                            });
                            that.tableData = data
                        }
                    })
            },
            async sendGood(index, row) {
                console.log(row)
                let formData = new FormData()
                formData.append("id", row.id)
                await this.$PUT(`${EXPREESS}`, formData)
                .then(res => {
                    if(res.code == 200) {
                         this.$message({
                            message: `${res.msg}`,
                            type: 'success'
                        });
                    }
                    this.getOrder()
                })
            },
            formatter(row, column) {
                return row.status;
            },
            search() {
                this.is_search = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        }
    }
</script>
<style lang="scss">
    .handle-input {
        width: 300px;
        display: inline-block;
    }
</style>